const n = `<!--
 * @Author: Quarter
 * @Date: 2024-08-01 11:15:43
 * @LastEditors: Quarter
 * @LastEditTime: 2024-10-16 19:41:38
 * @FilePath: /simple-ui/packages/documents/src/views/desktop/tabs/default-tabs.vue
 * @Description: 默认的标签页组件
-->
<template>
  <s-flex direction="column" gap="1em">
    <s-form label-width="6em" colon="：">
      <s-form-item label="排列方向">
        <s-radio-group v-model="options.align" :options="alignList"></s-radio-group>
      </s-form-item>
      <s-form-item label="主题模式">
        <s-radio-group v-model="options.theme" :options="themeList"></s-radio-group>
      </s-form-item>
    </s-form>
    <s-tabs default-tab="2" :align="options.align" :theme="options.theme">
      <s-tab-panel index="1" icon="label" value="1" label="标签一">标签一内容</s-tab-panel>
      <s-tab-panel icon="label" index="2" value="2" label="标签二">标签二内容</s-tab-panel>
      <s-tab-panel icon="label" index="3" value="3" label="禁用的标签" disabled
        >禁用的标签</s-tab-panel
      >
    </s-tabs>
  </s-flex>
</template>

<script lang="ts">
import {
  TAB_THEME_DEFAULT,
  TAB_THEME_LABEL,
  TAB_THEME_OPTIONS,
  TAB_ALIGN_DEFAULT,
  TAB_ALIGN_LABEL,
  TAB_ALIGN_OPTIONS,
} from "@smartcity/simple-ui";
import { Component, Vue } from "vue-property-decorator";

@Component
export default class DefaultTabs extends Vue {
  /**
   * @description: 排列方向可选项列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly alignList = TAB_ALIGN_OPTIONS.map((align) => ({
    value: align,
    label: TAB_ALIGN_LABEL.get(align),
  }));

  /**
   * @description: 主题模式可选项列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly themeList = TAB_THEME_OPTIONS.map((theme) => ({
    value: theme,
    label: TAB_THEME_LABEL.get(theme),
  }));

  /**
   * @description: 组件配置项
   * @private
   * @type {Object}
   */
  options = {
    align: TAB_ALIGN_DEFAULT, // 排列方向
    theme: TAB_THEME_DEFAULT, // 主题模式
  };
}
<\/script>
`; export { n as default };
